import styled from 'styled-components';
import spriteTable from '@/assets/img/sprite_table.png';
export const SongListV1Wrapper = styled.div`
  > table {
    margin: auto;
    border: 1px solid #d9d9d9;
    width: 670px;
    > thead {
      th {
        background: url(${spriteTable});
      }
    }
    .table_head {
      height: 34px;
      line-height: 34px;
      text-align: left;
      padding-left: 6px;
      background: url(${spriteTable}) no-repeat 0 -56px;
      font-weight: normal;
      color: #666;
    }
    > tbody {
      tr:nth-child(odd) {
        background-color: #f7f7f7;
      }
      tr {
        height: 30px;
        td {
          .r-index {
            width: 70px;
            height: 36px;
            margin: auto;
            > span {
              color: #999;
              line-height: 36px;
              margin-left: 20px;
            }
            > i {
              display: inline-block;
              width: 17px;
              height: 17px;
              background-position: -67px -279px;
              margin-left: 16px;
            }
          }
          a {
            display: inline-block;
            margin-left: 15px;
          }
          img {
            margin-left: 10px;
            cursor: pointer;
          }
          .player {
            background-position: 0 -103px;
            width: 17px;
            height: 17px;
            color: transparent;
            cursor: pointer;
          }
          .allTime {
            color: #666;
          }
          .ctrl {
            cursor: pointer;
            display: none;
            > a {
              width: 17px;
              height: 16px;
              margin-left: 0;
              margin-right: 5px;
            }
            .add {
              background-position: 0 -700px;
              &:hover {
                background-position: -22px -700px;
              }
            }
            .favorite {
              background-position: 0 -174px;
              &:hover {
                background-position: -20px -174px;
              }
            }
            .share {
              background-position: 0 -195px;
              &:hover {
                background-position: -20px -195px;
              }
            }
            .download {
              background-position: -81px -174px;
              &:hover {
                background-position: -104px -174px;
              }
            }
          }
          .ar_name {
            margin-left: 10px;
          }
        }
        &:hover {
          .allTime {
            display: none;
          }
          .ctrl {
            display: block;
          }
        }
      }
    }
    .third {
      tr:nth-child(-n + 3) {
        height: 70px;
        .player {
        }
      }
    }
  }
`;
